<template>
    <div>
        <guide :setp="setp"></guide>
        <div class="guide">	
            <div class="center dosdiv">
                <div v-for="(item, index) in 4" :key="index" 
                class="dos" 
                :style="setp == index ? 'background: #F6CB23;' : ''"></div>
            </div>
            <div class="guide_bottom">
                <div class="skip center" @click="skip">Skip</div>
                <div class="next center" @click="next">NEXT</div>
            </div>
        </div>
    </div>
</template>

<script>
import guide from '@/components/guide.vue';
export default {
    components: {
        guide
    },
    data() {
        return {
            setp:0
        }
    },
    methods: {
        skip() {
            console.log('fsafaf')
            this.$router.push('/')
        },
        next() {
            this.setp++
            if(this.setp>3) this.$router.push('/')
        }
    }
}
</script>

<style lang="scss" scoped>
.guide{
		width: 100%;
		position: fixed;
		bottom: 20px;
		&_bottom{
			width: 90%;
			margin-left: 5%;
			display: flex;
			justify-content: space-between;
		}
	}
	.skip{
		width: 22%;
		height: 54px;
		border-radius: 10px;
		color: #F6CB23;
		font-size: 17px;
		border: 1px solid #F6CB23;
		
	}
	.next{
		width: 70%;
		height: 54px;
		border-radius: 10px;
		background: #F6CB23;
		color:#000;
		font-size: 17px;
	}
	.dosdiv{
		margin-bottom: 20px;
	}
	.guideSwiper{
		height: 82vh;
		// background: rebeccapurple;
		position: fixed;
		bottom: 120px;
		width: 100%;
	}
	.dos{
		width: 51px;
		height: 3px;
		border-radius: 5px;
		background: #848484;
		margin-right: 5px;
	}
	.guide-item{
		color:#fff;
		position: relative;
		text-align: center;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.guide-item_index{
		margin-bottom: 80px;
		margin-top: 20px;
		font-size: 13px;
		text-align: center;
	}
	.guide-itme-title{
		font-size: 24px;
		width: 180px;
		font-weight: bold;
		text-align: center;
	}
	.guide-item-bot{
		width: 202px;
		height: 276px;
		margin-top: 80px;
		border-radius: 10px;
		background-color: #59626F;
		position: relative;
	}
	.guide-item-bot::before{
		content: " ";
		position: absolute;
		width: 42px;
		height: 5px;
		border-radius: 10px;
		top: 20px;
		background-color: #000;
		left: 80px;
	}
	.guide-item-bot-img{
		img{
			width: 327px;
			height: 327px;
			margin-top: -180px;
            position: absolute;
            left: 10%;
		}
	}
	.guide-item-giy{
		position: relative;
		img{
			margin-top: 20px;
		}
	}
</style>